/* eslint-disable */ 
<template>
  <div class="echartdot" style="width: auto; margin: 0 auto; box-sizing: border-box">
    <div class="echartdot_header">
      <el-select
        v-model="areaData"
        @change="(e) => myChartClick({ name: e })"
        class="m-2"
        placeholder="Select"
        size="small"
      >
        <el-option
          v-for="item in [{ name: '中国' }, ...market]"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </div>
    <div id="container" style="height: 100%; width: 100%"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts'
import axios from 'axios'
import {} from '@/api'
import router from '@/router'
import { useStore } from 'vuex'
const store = useStore()
import { saveAs } from 'file-saver' // 导入 FileSaver

import mapMarkRed from '../../assets/images/map-mark-red.png'
var _mapMarkRed = 'image://'+mapMarkRed

export default {
  name: 'echartdot',
  data() {
    return {
      myChart: '',
      companyList: [], //客户
      areaDataArray: [
        ['北京', '110000', 150.5, [116.407526, 39.90403]],
        ['天津', '120000', 150.4, [117.200983, 39.084158]],
        ['河北', '130000', 660.0, [114.530235, 38.037433]],
        ['山西', '140000', 550.0, [112.562398, 37.873532]],
        ['内蒙古', '150000', 1600.0, [111.76629, 40.81739]],
        ['辽宁', '210000', 500.0, [123.429096, 41.796767]],
        ['吉林', '220000', 550.0, [125.3245, 43.886841]],
        ['黑龙江', '230000', 800.0, [126.642464, 45.756967]],
        ['上海', '310000', 250.0, [121.473701, 31.230416]],
        ['江苏', '320000', 500.0, [118.796877, 32.060255]],
        ['浙江', '330000', 600.0, [120.153576, 30.287459]],
        ['安徽', '340000', 650.0, [117.283042, 31.86119]],
        ['福建', '350000', 900.0, [119.306239, 26.075302]],
        ['江西', '360000', 1000.0, [115.892151, 28.676493]],
        ['山东', '370000', 660.0, [117.000923, 36.675807]],
        ['河南', '410000', 740.0, [113.665412, 34.757975]],
        ['湖北', '420000', 820.0, [114.298572, 30.584355]],
        ['湖南', '430000', 900.0, [112.982279, 28.19409]],
        ['广东', '440000', 800.0, [113.280637, 23.125178]],
        ['广西', '450000', 870.0, [108.320007, 22.82402]],
        ['海南', '460000', 530.0, [110.33119, 20.031971]],
        ['重庆', '500000', 600.0, [106.504959, 29.533155]],
        ['四川', '510000', 920.0, [104.065735, 30.659462]],
        ['贵州', '520000', 720.0, [106.713478, 26.578343]],
        ['云南', '530000', 780.0, [102.712251, 25.040609]],
        ['西藏', '540000', 1300.0, [89.137982, 31.367315]],
        ['陕西', '610000', 910.0, [108.940175, 34.341568]],
        ['甘肃', '620000', 920.0, [103.826308, 36.059421]],
        ['青海', '630000', 800.0, [101.780268, 36.620939]],
        ['宁夏', '640000', 460.0, [106.278179, 38.46637]],
        ['新疆', '650000', 1600.0, [87.617733, 43.792818]],
        ['台湾', '710000', 800.0, [87.617733, 43.792818]],
        ['香港', '810000', 150.0, [87.617733, 43.792818]],
        ['澳门', '820000', 30.0, [87.617733, 43.792818]]
      ], // areaData[地名，地区编号，地区面积，地区中心点坐标(暂未使用)]
      areaData: '中国',
      market: [],
      china: {}
    }
  },
  watch: {
    province: {
      handler() {
        setTimeout(() => {
          let companyList = this.$store.state.companyList
          let areaList = this.$store.state.areaList
          let provinceObj = {}

          companyList = this.$store.state.companyList
          areaList = this.$store.state.areaList


          areaList.forEach((item) => (provinceObj[item.id] = item))
          this.companyList = companyList.map((e) => ({
            customerid: e.id,
            customername: e.title,
            provinceName: provinceObj[Number(e.provinceId)].name,
            longitude: Number(e.longitude),
            latitude: Number(e.latitude)
          }))

          this.$nextTick(() => {
            this.dotChart()
          })
        }, 1000);
      },
      immediate: true
    }
  },
  computed: {
    province() {
      return this.$store.state.province
    }
  },
  methods: {
    goback: function () {
      window.history.back()
    },
    //处理地标数据
    convertData(data) {
      data = data.filter((e) => this.areaData == '中国' || e.provinceName == this.areaData)
      var res = []
      for (var i = 0; i < data.length; i++) {
        res.push({
          name: data[i].customername,
          value: [data[i].longitude, data[i].latitude],
          id: data[i].customerid
        })
      }
      return res
    },
    dotChart: function () {
      let _this = this
      _this.myChart = echarts.init(document.getElementById('container'))
      axios
        .get('/static/json/china/china.json?time=' + new Date().getTime())
        .then(function ({ data }) {
          _this.market = data.features.map((e) => e.properties).filter((e) => e.name)
          _this.china = data
          echarts.registerMap('china', data, {})
          var option = {
            // tooltip: {
            //   trigger: 'item',
            //   formatter: '{b}<br/>{c} (p / km2)'
            // },
            geo: {
              //地理坐标组件

              type: 'map', // 组件类型
              map: 'china', //使用地图数据 见上方 echarts.registerMap
              roam: true, //是否可拖拽
              zoom: 1.5, //地图缩放大小
              center: [103.403694, 35.949459], //初始视角中心坐标
              aspectScale: 0.75, //地图的长宽比
              label: {
                show: true, //显示地名
                color: '#F0EFEF', //地名颜色
                fontFamily: '宋体', //地名字体
                fontSize: 11 //地名字体大小
              },
              itemStyle: {
                //地图区域的多边形 图形样式
                areaColor: '#07282D', //区域颜色
                borderColor: '#1E8A8B', //边框颜色
                borderWidth: 1.3, //描边线宽。为 0 时无描边。
                borderType: 'solid', //描边类型
                shadowColor: '#125E64', //图形阴影的模糊大小
                shadowBlur: 100, //图形阴影的模糊大小
                shadowOffsetX: 100, //阴影水平方向上的偏移距离。
                shadowOffsetY: 100, //阴影垂直方向上的偏移距离。
                opacity: 0.5 //图形透明度
              },
              emphasis: {
                //高亮状态下的多边形和标签样式。
                disabled: false, // 关闭高亮
                itemStyle: {
                  //地图区域的多边形 图形样式
                  areaColor: '#4BF1BE', //区域颜色
                  borderColor: '#1E8A8B', //边框颜色
                  borderWidth: 1, //描边线宽。为 0 时无描边。
                  opacity: 1, //图形透明度
                  borderType: 'solid', //描边类型
                  shadowColor: '#125E64', //图形阴影的模糊大小
                  shadowBlur: 100, //图形阴影的模糊大小
                  shadowOffsetX: -10, //阴影水平方向上的偏移距离。
                  shadowOffsetY: -10 //阴影垂直方向上的偏移距离。
                },
                label: {
                  show: true, //显示地名
                  color: '#000', //地名颜色
                  fontFamily: '宋体', //地名字体
                  fontSize: 11 //地名字体大小
                }
              }
            },
            // 公司地标 散点图
            series: [
              {
                type: 'scatter', //散点图类型
                coordinateSystem: 'geo', //散点坐标类型
                symbol: _mapMarkRed, //地标
                symbolSize: [17, 22], //地标尺寸
                cursor: 'pointer',
                // data:[{name:"北京市",value:[116.46,39.92,4000]}],//数据
                data: _this.convertData(_this.companyList), //数据
                label: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: true,
                    formatter: '{b}',
                    position: 'top'
                  }
                }
              }
            ]
          }
          _this.myChart.setOption(option)
          _this.myChart.on('click', _this.myChartClick)
        })
    },
    myChartClick(params) {
      let _this = this

      if (params.name == '中国') {
        _this.dotChart()
      }

      //如果是地标的点击事件 则跳转到对应的客户报表界面
      if (params.componentSubType == 'scatter') {
        // alert('客户id为：' + params.data.id)

        this.$store.dispatch('setCustomer', params.data.id)
        router.push({ name: 'energyuse' })
      }

      //******如果不是地标点击事件 则继续向下，是地图点击事件********

      //获取中国地图的数据
      var chinaGeoJson = _this.china.features
      //找到对应地区的地区编码
      for (let geoJson in chinaGeoJson) {
        let properties = chinaGeoJson[geoJson].properties
        //比较点击区域的名字
        if (properties.name == params.name) {
          _this.areaData = properties.name

          //找到对应地区的数据
          let areaData
          for (let areaIndex in _this.areaDataArray) {
            if (_this.areaDataArray[areaIndex][1] == properties.adcode) {
              areaData = _this.areaDataArray[areaIndex]
            }
          }

          //台湾和香港拿地图的数据地址不同
          let path = `${properties.adcode}_full.json`
          if (properties.adcode == '710000' || properties.adcode == '810000') {
            path = `${properties.adcode}.json`
          }
          // TODO 去阿里云拿地图数据，未来可以存到本地
          axios
            .get(`/static/json/china/${path}?time=${new Date().getTime()}`)
            .then(({ data }) => {
              //注销地图实例
              echarts.dispose(_this.myChart)
              //初始化地图实例
              _this.myChart = echarts.init(document.getElementById('container'))
              //使用省份数据
              echarts.registerMap('china', data, {})
              let cityZoom = (1.5 * 1600.0) / areaData[2]
              if (properties.adcode == '130000') {
                //河北中心坐标特殊处理
                properties.centroid = [116.530235, 39.037433]
              } else if (properties.adcode == '620000') {
                //甘肃中心坐标特殊处理
                properties.centroid = [101.826308, 38.059421]
              }
              var option = {
                geo: {
                  //地理坐标组件
                  type: 'map', // 组件类型
                  map: 'china', //使用地图数据 见上方 echarts.registerMap
                  roam: true, //是否可拖拽
                  zoom: cityZoom, //地图缩放大小
                  center: properties.centroid, //初始视角中心坐标
                  aspectScale: 0.75, //地图的长宽比
                  label: {
                    show: true, //显示地名
                    color: '#F0EFEF', //地名颜色
                    fontFamily: '宋体', //地名字体
                    fontSize: 11 //地名字体大小
                  },
                  itemStyle: {
                    //地图区域的多边形 图形样式
                    areaColor: '#07282D', //区域颜色
                    borderColor: '#1E8A8B', //边框颜色
                    borderWidth: 1, //描边线宽。为 0 时无描边。
                    borderType: 'solid', //描边类型
                    shadowColor: '#125E64', //图形阴影的模糊大小
                    shadowBlur: 100, //图形阴影的模糊大小
                    shadowOffsetX: 100, //阴影水平方向上的偏移距离。
                    shadowOffsetY: 100, //阴影垂直方向上的偏移距离。
                    opacity: 0.5 //图形透明度
                  },
                  emphasis: {
                    //高亮状态下的多边形和标签样式。
                    disabled: false, // 关闭高亮
                    itemStyle: {
                      //地图区域的多边形 图形样式
                      areaColor: '#4BF1BE', //区域颜色
                      borderColor: '#1E8A8B', //边框颜色
                      borderWidth: 1, //描边线宽。为 0 时无描边。
                      opacity: 1, //图形透明度
                      borderType: 'solid', //描边类型
                      shadowColor: '#125E64', //图形阴影的模糊大小
                      shadowBlur: 100, //图形阴影的模糊大小
                      shadowOffsetX: -10, //阴影水平方向上的偏移距离。
                      shadowOffsetY: -10 //阴影垂直方向上的偏移距离。
                    },
                    label: {
                      show: true, //显示地名
                      color: '#000', //地名颜色
                      fontFamily: '宋体', //地名字体
                      fontSize: 11 //地名字体大小
                    }
                  },
                  regions: [
                    {
                      name: '南海诸岛',
                      itemStyle: {
                        // 隐藏地图
                        normal: {
                          opacity: 0 // 为 0 时不绘制该图形
                        }
                      },
                      label: {
                        show: false // 隐藏文字
                      }
                    }
                  ]
                },
                // 公司地标 散点图
                series: [
                  {
                    type: 'scatter', //散点图类型
                    coordinateSystem: 'geo', //散点坐标类型
                    symbol: _mapMarkRed, //地标
                    symbolSize: [17, 22], //地标尺寸
                    cursor: 'pointer',
                    // data:[{name:"北京市",value:[116.46,39.92,4000]}],//数据
                    data: _this.convertData(_this.companyList), //数据
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: true,
                        formatter: '{b}',
                        position: 'top'
                      }
                    }
                  }
                ]
              }
              _this.myChart.setOption(option)
              //重新注册监听事件
              _this.myChart.on('click', _this.myChartClick)
            })
            .catch((err) => {
              alert(err)
            })

          return
        }
      }
    }
  },
  mounted() {}
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.echartdot_header {
  position: absolute;
  z-index: 2;
  padding: 20px;
  top: 0;
}

.echartdot {
  height: 100%;
  position: relative;
}
</style>